<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>


    <!--时间日期选择文件依赖-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.css"
        rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script
        src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>


</head>

<body>
    <!--HTML-->
    <p class="magic-desc">添加任务</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务名称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" placeholder="请输入任务名称">
            </div>
        </div>


        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务星级</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="validation_select" class="bk-form-select">
                    <option value="beijing">一星任务</option>
                    <option value="shanghai">一星任务</option>
                    <option value="guangzhou">一星任务</option>
                    <option value="shenzhen">一星任务</option>
                </select>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">起止时间</label>
            <input type="text" class="form-control daterangepicker_demo" id="daterangepicker_demo3"
                placeholder="选择日期...">
            <script type="text/javascript">
                // 综合示例
                $('#daterangepicker_demo3').daterangepicker({
                    "showDropdowns": true,//显示年，月下拉选择框
                    "showWeekNumbers": true,//显示第几周
                    "timePicker": true,//时间选择
                    "timePicker24Hour": true,//24小时制
                    "timePickerIncrement": 1,//时间间隔
                    "timePickerSeconds": true,
                    "dateLimit": { //可选择的日期范围
                        "days": 30
                    },
                    "ranges": {
                        "前7天": [moment().subtract(6, 'days'), moment()],
                        "前30天": [moment().subtract(29, 'days'), moment()],
                        "本月": [moment().startOf('month'), moment().endOf('month')],
                        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    },
                    "locale": {
                        "format": "YYYY-MM-DD HH:mm:ss",// 日期格式
                        "separator": " 至 ",
                        "applyLabel": "确定",
                        "cancelLabel": "取消",
                        "fromLabel": "从",
                        "toLabel": "到",
                        "weekLabel": '周',
                        "customRangeLabel": "自定义",
                        "daysOfWeek": [
                            "日",
                            "一",
                            "二",
                            "三",
                            "四",
                            "五",
                            "六"
                        ],
                        "monthNames": [
                            "一月",
                            "二月",
                            "三月",
                            "四月",
                            "五月",
                            "六月",
                            "七月",
                            "八月",
                            "九月",
                            "十月",
                            "十一月",
                            "十二月"
                        ],
                        "firstDay": 1// 周开始时间
                    },
                    "startDate": "2015-07-01 10:35:20",
                    "endDate": "2015-08-15 10:35:20",
                    "opens": "center",//left/center/right
                    "drops": "up",//选择框出现的位置 up/down
                    "buttonClasses": "btn btn-sm",//按钮通用样式
                    "applyClass": "btn-success",//确定按钮样式
                    "cancelClass": "btn-default"//取消按钮样式
                });
            </script>

            <div class="bk-form-item">
                <label class="bk-label" style="width:150px;">备注</label>
                <div class="bk-form-content" style="margin-left:150px;">
                    <textarea name="" id="" class="bk-form-textarea" placeholder=""></textarea>
                </div>
            </div>
        </div>

        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>

</body>

</html>